<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width,initial-scale=1'>

    <title>Электронный каталог</title>
    <link rel='icon' type='image/png' href='img/favicon.ico'>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/fa.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div class="container">

    <div class="row">

        <form class="col-lg-6 offset-lg-3 mt-3"
              autocomplete="off"
              onsubmit="return handleSubmit()">

            <h2 class="text-center mb-4">Электронный каталог НТБ ИРНИТУ</h2>

            <div class="input-group">
                <div class="form-control">
                    <label for="database-selector" class="form-control">База данных: </label>
                </div>
                <select id="database-selector" class="btn btn-outline-primary">
                </select>
            </div>

            <div id="input-container"></div>

            <div class="mt-3 mb-3" style="text-align: right;">
                <button class="btn btn-sm btn-outline-info" onclick="addRow()"><i class="fas fa-plus"></i></button>
            </div>


            <div class="mt-3">
                <div class="input-group-text">
                    <label for="how-many">ограничить результат&nbsp;&nbsp;</label>
                    <select id="how-many" class="form-select">
                        <option value="10">10</option>
                        <option value="50" selected>50</option>
                        <option value="100">100</option>
                        <option value="500">500</option>
                    </select>
                </div>

                <div class="input-group-text">
                    <label for="format-selector" class="form-check-label">формат выдачи результата&nbsp;</label>
                    <select id="format-selector" class="form-control">
                        <option value="@" selected>полный</option>
                        <option value="@brief">краткий</option>
                    </select>
                </div>

                <div class="input-group-text">
                    <input id="full-text" type="checkbox" class="form-check-input" checked>
                    <label for="full-text" class="form-check-label">&nbsp;только публикации с полным текстом</label>
                </div>

                <div class="input-group mt-3 mb-3">
                    <button type="submit" class="btn btn-primary form-control">Поиск</button>
                    <button type="reset" class="btn btn-outline-primary form-control">Сброс</button>
                </div>
            </div>

        </form>

        <div id="busyIndicator" class="text-center mb-5" style="display: none;">
            <h2><img id="arctic-fox" src="img/arctic-fox.gif" alt="полярная лисичка"></h2>
        </div>

        <div id="errorIndicator" class="text-center text-danger mb-5" style="display: none;">
            <h2 id="errorMessage">Произошла ошибка</h2>
        </div>

        <div id="result-container" class="col-lg-6 offset-lg-3 mt-3">
        </div>

    </div>

</div>

<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/catalog.js"></script>

</body>
</html>
